<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding [hidden]="!novel">
  <ion-toolbar color="white">
    <ion-title>{{novel?.title}}</ion-title>
    <span class="supplement" *ngIf="novel?.getAuthors">{{novel?.getAuthors}}</span>
    <ion-buttons end>
      <button ion-button icon-only color="danger" (click)="toggleFavorite()">
        <ion-icon name="{{isFavorite? 'heart': 'heart-outline'}}"></ion-icon>        
      </button>
    </ion-buttons>
  </ion-toolbar>
  <ion-row padding-top>
    <div ion-col col-12 col-md-6 align-items-center>
      <img col-12 [ln-img-src]="novel?.cover" alt="Cover" class="cover" />
    </div>

    <div ion-col col-12 col-md-6>
      <h6>Genre(s):</h6>

      <!--<ion-badge > </ion-badge>-->
      <ion-badge item-left *ngFor="let genre of novel?.genres" margin-right color="secondary" class="genre">
        {{genre.name}}
      </ion-badge>
    </div>

  </ion-row>

  <ion-row>
    <ion-col>
      <h6>Summary</h6>
      <p text-justify [innerHTML]="formattedSynopsisText">
      </p>
    </ion-col>

  </ion-row>

  <ion-fab bottom right #fab>
    <button ion-fab color="primary">
      <ion-icon name="play"></ion-icon>
    </button>
    <ion-fab-list side="top">
      <button ion-fab (click)="startReading(); fab.close()">
        <ion-icon name="book"></ion-icon>
        <ion-label>Read</ion-label>
      </button>
      <button ion-fab (click)="download(); fab.close()">
        <ion-icon name="cloud-download"></ion-icon>
        <ion-label>Download</ion-label>
      </button>
      <button ion-fab (click)="exportToEpub(); fab.close()">
        <ion-icon name="document"></ion-icon>
        <ion-label>Export to Epub</ion-label>
      </button>
    </ion-fab-list>
  </ion-fab>
</ion-content>